<html>
    <head>
	<!-- D3 -->
	<script src="js/d3.min.js"></script>
	<script src="js/d3.legend.js"></script>

	<!-- Jquery -->
	<script src="js/jquery.min.js"></script>

	<!-- Spreadsheet -->
	<link rel="stylesheet" href="vendor/handsontable-master/dist/handsontable.full.min.css">
	<script src="vendor/handsontable-master/dist/handsontable.full.min.js"></script>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css"/>

	<script src="data/lin.sub.js"></script>
	<script src="js/tsne.js"></script>
	<script src="js/tsne_vis.js"></script>
	<link rel="stylesheet" href="css/style.css"/>

    </head>

    <body>

	<a href="https://github.com/jefworks/tsne-online" class="github-corner"><svg width="80px" height="80px" viewBox="0 0 250 250" style="z-index:1000; fill:#1a242f; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>

	<div class="container-fluid"

	    <!-- header -->
	    <div class="row">
		<div class="col-md-12">
		    <div class="text-center">
			<h1>
			    Interactive t-SNE
			    <a data-toggle="collapse" href="#infoClose" aria-expanded="false" aria-controls="infoClose"><sup>?</sup></a> Online
			</h1>
		    </div>
		    <div class="panel panel-default collapse" id="infoClose">
			<div class="panel-heading">
 			    <h3 class="panel-title">About</h3>
			</div>
			<div class="panel-body">
			    <p><a href="http://lvdmaaten.github.io/tsne/" target="_blank">t-SNE</a> is a popular dimensionality reduction method for, among many other things, identifying transcriptional subpopulations from single-cell RNA-seq data. However, the sensitivities of results to and the appropriateness of different parameters used have not been thoroughly investigated. Building on <a href="https://github.com/karpathy/tsnejs" target="_blank">previously developed Javascript-based implementations of the t-SNE algorithm</a>, we present this user-friendly web tool to begin to interactively explore the impact of these parameters on identified subpopulations.
			    </p>
			    
			    <hr>
			    
 			    <h4>Usage Instructions</h4>
			    <p>
				To use your own data, paste your data into the datatable in the format shown with the sample demo data. Specifically, your data must be arranged with cells as rows and genes as columns in order to cluster on the cells. The first row of the datatable will be used as a header. Data values inputted into the first row will be disregarded. Similarly, the first two columns of the datatable will be used as cell names and cell annotations (to color the tSNE plot). If cell annotations are not available, this column can be kept empty. Data values inputted into the first two columns will be disregarded. All other entries must be numeric as they are assumed to be gene expression values.
				<br><br>
				Non-numeric entries such as NAs and Infs will result in errors.
				<br><br>
				You can <b>Ctrl-A</b> and <b>Delete</b> the datatable to clear the current sample demo data prior to pasting in your own data. 
			    </p>

			    <hr>
			    
 			    <h4>Troubleshooting</h4>
			    <p>
				Error messages are available in <a href="https://developers.google.com/web/tools/chrome-devtools/console/">the web console</a>.
				<br><br>
				This webtool <a href="https://en.wikipedia.org/wiki/Client-side">runs using your own computer's memory</a>. In order to avoid crashing your own browser, please do not use this webtool with large datasets. Datasets should be subsetted to fewer than 100 genes AND fewer than 500 cells if possible. For more substantial analyses, please consult a bioinformatics collaborator. 
			    </p>
			    
			    <hr>
			    
			    <h4>Disclaimer</h4>
			    <p>THE WEBTOOL IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE WEBTOOL OR THE USE OR OTHER DEALINGS IN THE WEBTOOL.</p>

			</div>
			
		    </div>
		</div>
	    </div>

	    <!-- data -->
	    <div class="row">
		<div class="col-md-6">
		    <div class="panel panel-default">
			<div class="panel-heading">
 			    <h3 class="panel-title">Data <i>(small sample dataset from <a href="http://www.ncbi.nlm.nih.gov/pubmed/25700174" target="_blank">Zeisel et al.</a>)</i></h3>
			</div>
			<div class="panel-body" style="height:360px; overflow: scroll">
			    <div id="incsv" class="hot handsontable"></div>
			</div>
		    </div>
		</div>
		<div class="col-md-6">
		    <div class="panel panel-default">
			<div class="panel-heading">
 			    <h3 class="panel-title">Parameters</h3>
			</div>
			<div class="panel-body" style="height:360px; overflow: scroll">
			<div id="control-panel" data-sr="enter left over 8s">
			    <div class="param">
				<label for="param-perplexity">Perplexity</label>
				<input id="param-perplexity" type="range" min="2" max="100" value="30", step="1">
				<output for="param-perplexity" id="param-perplexity-value">30</output>
			    </div>
			    <div class="param">
				<label for="param-learningrate">Learning Rate</label>
				<input id="param-learningrate" type="range" min="1" max="300" value="10", step="1">
				<output for="param-learningrate" id="param-learningrate-value">10</output>
			    </div>
			    <div class="param">
				<label for="param-maxiter">Max Iterations</label>
				<input id="param-maxiter" type="range" min="100" max="1000" value="500", step="10">
				<output for="param-maxiter" id="param-maxiter-value">500</output>
			    </div>
			    <div class="param">
				<label for="param-distance">Distance Metric</label>
				<select id="param-distance" name="param-distance">
				    <option value="euclideanDist" selected>Euclidean distance</option>
				    <option value="jaccardDist">Jaccard dissimilarity</option>
				</select>
				<output for="param-distance" id="param-distance-value"></output>
			    </div>
			    <div class="param">
				<label for="param-transform">Data Transform</label>
				<select id="param-transform" name="param-transform">
				    <option value="noTrans" selected>No Transform</option>
				    <option value="logTrans">Log10</option>
				    <option value="asinhTrans">asinh</option>
				    <option value="binTrans">Binarize</option>
				</select>
				<output for="param-transform" id="param-transform-value"></output>
			    </div>

			    <div class="row">
			      <div class="col-md-6">
				<p><div id="run-button"><button class="btn btn-primary btn-block" onclick="init(getData());">Run</button></div></p>
			      </div>
			      <div class="col-md-6">
				<p><div id="save-button"><button class="btn btn-primary btn-block" onclick="downloadSvg();">Export Image</button></div></p>
			      </div>
			    <div id="cost"></div>

			</div>
			</div>
		    </div>
		</div>
	    </div>

	    <!-- display -->
	    <div class="row">
		<div class="col-md-12" align="center">
		    <div class="panel panel-default">
			<div id="embed"></div>
		    </div>
		</div>
	    </div>
	</div>

	<footer>
	    <a href="https://github.com/JEFworks" target="_blank">@JEFworks</a>
	</footer>
	
  </body>

  <script>

   // fill in data
   var container = document.getElementById('incsv');
   var hot = new Handsontable(container, {
       data: dataInit,
       rowHeaders: false,
       colHeaders: false
   });

   // form controls
   $('#param-perplexity').bind('input', function () { $('#param-perplexity-value').text($('#param-perplexity').val()); });
   $('#param-earlyexag').bind('input', function () { $('#param-earlyexag-value').text($('#param-earlyexag').val()); });
   $('#param-learningrate').bind('input', function () { $('#param-learningrate-value').text($('#param-learningrate').val()); });
   $('#param-maxiter').bind('input', function () { $('#param-maxiter-value').text($('#param-maxiter').val()); });

   function downloadSvg() {
// Download sag courtesy of https://stackoverflow.com/questions/23218174/how-do-i-save-export-an-svg-file-after-creating-an-svg-with-d3-js-ie-safari-an

svg = document.getElementById('embed').firstElementChild
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);

//add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}

//add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' + source;

//convert svg source to URI data scheme.
var svgUrl = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);

var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = "tsne.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
   }
   
  </script>

  <!-- load later -->
  <script src="js/bootstrap.min.js"></script>

</html>
